<template>
  <div>
    <van-nav-bar
      title="我的点赞"    
      left-arrow   
      class="page-nav-bar"
      @click-left="$router.back()"
    />
 
  <van-swipe-cell class="kuang" v-for="item in list" :key="item.id" >
    
    <router-link to="/xiangq"  @click.native="indexid(item.id)">
      <div class="lf">
      <h3>{{item.title}}</h3>
      <p class="gray">{{item.description}}</p>
      <span><van-icon name="eye" />收藏({{item.click}})</span> &nbsp;
      <span><van-icon name="good-job" />点赞({{item.lovenum}})</span>
    </div>
    <div class="ri">
      <img :src="'http://124.223.14.236:8060/'+ item.pic" alt="" />
    </div>
    </router-link>
   
   <template #right  >
    <van-button square  class="delete-button" @click="quxiao(item.id)">
      删除
    </van-button>
   </template>
  </van-swipe-cell>
  
 
   
  </div>
</template>

<script>
import {getZan,getZnAndSc} from '../../api/shcdz'
export default {
  data() {
    return {
      list:[],
      froms:{
        type:2,
        page:1,
        limit:20,
      },
      shan:{
        type:2,
        article_id:'',
        action:'del',
      }
    }
  },
  created(){
this.dianzan()
  },
  methods:{
     indexid(idx){
     localStorage.setItem('ids',idx)
     window.location.reload();
  },
  async dianzan(){
    try {
      let {data} =await getZan(this.froms)
      console.log(data.data.list.data);
      this.list=data.data.list.data
    } catch (error) {
      console.log(error);
    }
  },
  async quxiao(val){
    try {
    this.shan.article_id=val
      let {data} =await getZnAndSc(this.shan)
      console.log(data);
      // this.list=data.data.list.data
       window.location.reload();
    } catch (error) {
      console.log(error);
    }
  },
  }
};
</script>

<style scoped>

  .delete-button {
    height: 130px;
    width: 66px;
    background-color: red;
    margin: 0;
    color: #000;
  }
  .van-button__text{
color: #000;
font-size: 17px;
  }
  .kuang {
  margin-top: 15px;
  margin-bottom: 15px;
  height: 130px;
  overflow: hidden;
}
span {
  font-size: 14px;
  color: rgb(182, 182, 182);
}
.lf {
  float: left;
  width: 50%;
  margin-left: 16px;
}
.gray {
  margin-top: 10px;
  color: gray;
}
.ri {
  float: right;
  width: 40%;
}
.ri img {
  width: 100%;
  height: 100%;
}
h3{
  width: 200px;
  height: 25px;
  overflow: hidden;
}
p{
  height: 63px;
  overflow: hidden;
}
</style>